<!--登陆注册页面-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sign-inOrOut</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/common/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="static/common/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/common/font-awesome/css/font-awesome.min.css">
  <script src="static/common/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script src="static/common/jquery.redirect.js" charset="utf-8"></script>
  
  <style>
      *{
          list-style: none;
          margin: 0px;
          padding: 0px;
      }
      html,body{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .tips{
        position: fixed;
        top: 0;
        width: 99%;
        height: 55px;
        z-index: 999;
        border-radius: 6px;
        margin-left: 0.5%;
        text-align: center;
        line-height: 55px;
      }
      .tips.success{
        background-color: #DFF0D8;
      }
      .tips.danger{
        background-color: #F2DEDE;
      }
      .tips.warning{
        background-color: #FCF8E3;
      }
      .tips .tips_msg{
        
      }
      .bg {
        position: absolute;
        background: url('static/system/img/sign_in_bg.jpg');
        width: 100%;
        height:100%;  
        background-position: center center;
        background-size: cover;
      }
      .bg-blur {
        float: left;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        -webkit-filter: blur(7px);
        -moz-filter: blur(7px);
        -o-filter: blur(7px);
        -ms-filter: blur(7px);
        filter: blur(7px);
      }
      input::-webkit-input-placeholder{
        color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 15px;
      }
      #login_wrap{
       /* display: none;*/
      }
      #register_wrap{
          display: none;
      }
      #login_box>div{
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
        font-size: 20px;
        text-align: center;
        border-bottom: none;
      }
      #login_title{
        font-family: "宋体" !important;
        font-size: 69px !important;
        font-weight: 800;
        color:gray;
        padding-top: 26px;
        margin-bottom: 36px;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
      }
      .input>input{
        margin-left: -34px;
        width: 95%;
      }
      .input span{
        position: absolute;
        right: 25px;
        top: 10px;
      }
      .layui-form-item{
        text-align: left;
      }
      .error{
        color:#C0C0F5;
        font-size:15px;
      }
      #forgetPass{
        border: none;
      }
      #forgetPass:hover,#forgetPass+button:hover{
        background:lightblue;
      }
      span{
        font-size: 15px;
        color: #7D7D7D;
      }
      .email_span{
        color: #7D7D7D;
      }
      .remember{
        display: block;
        width:150px;
        margin:17px 0 0 64px;
      }
      #register,#login{
        position: absolute;
        right: 50px;
        cursor: pointer;
      }
      #register>a,#login>a{
        color: #7D7D7D;
        text-decoration: none;
      }
      #register>a:hover,#login>a:hover{
        color:lightblue;
      }
      #layui-layer1,#layui-layer2,#layui-layer3,#layui-layer5{
        left: 500px;
        width: 400px;
      }
      .phone_code{

      }
      .phone_code:hover{
        background-color: lightblue;
      }
  </style>
</head>
<body>
        <div class="tips" style="">
            <object data="" type="image/svg+xml" style="position: relative;top: 2px;"></object>
            <span class="tips_msg"></span>
        </div>
        <div class="bg bg-blur"></div>
        <div id="login_wrap" class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-md-offset3">
                  <div class="grid-demo grid-demo-bg1">
                      <div class="layui-row layui-col-space15">
                          <div class="layui-col-md12">
                            
                            <div id="login_box" class="layui-card">
                              <div id="login_title" class="layui-card-header">简知</div>
                              <div class="layui-card-header" style="font-family: '宋体' !important;opacity: 0.4;">让您发现更大的世界</div>
                              <div class="layui-card-body">
                                <!--表单-->
                                  <form id="login_form" class="layui-form">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="text" name="uName" lay-verify="title" autocomplete="off" placeholder="username" class="layui-input l_username">
                                          </div>
                                          <span class="error"></span>
                                      </div>
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="password" name="uPwd" lay-verify="title" autocomplete="off" placeholder="password" class="layui-input l_password">
                                          </div>
                                          <span class="error"></span>
                                      </div>                         
                                      <input id="forgetPass" class="layui-btn layui-btn-primary" value="忘记密码?点我找回"></input>
                                      <input type="button" id="submit_login" class="layui-btn layui-btn-primary" value="登录">
                                      
                                      <input type="reset" class="layui-btn layui-btn-primary"></input>
                                  </form>
                                  <div class="remember">
                                    <input type="checkbox" name="remember" title="记住密码" checked=""/>
                                    <span>:Remember me</span>
                                    <span id="register"><a href="#">sign-up</a></span>
                                  </div>
                                  
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
        <div id="register_wrap" class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-md-offset3 register_box">
                  <div class="grid-demo grid-demo-bg1">
                      <div class="layui-row layui-col-space15">
                          <div class="layui-col-md12">
                            <div id="login_box" class="layui-card" style="margin-top: -80px;">
                              
                               <div id="login_title" class="layui-card-header">简知</div>
                              <div class="layui-card-header" style="font-family: '宋体' !important;opacity: 0.4;">注册简知让您发现更大的世界</div>
                              <div class="layui-card-body">
                                <!--表单-->
                                  <form id="register_form" class="layui-form">
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="text" name="RuName" lay-verify="title" autocomplete="off" placeholder="username" class="layui-input r_username">
                                            <span id="validRUsername" class="" aria-hidden="true"></span>
                                          </div>
                                          <span class="error"></span>
                                      </div>
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="password" name="RuPwd" lay-verify="title" autocomplete="off" placeholder="password" class="layui-input r_password">
                                            <span id="validRPassword" class="" aria-hidden="true"></span>
                                          </div>
                                          <span class="error"></span>
                                      </div>      
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="fa fa-envelope-o email_span" aria-hidden="true" style="font-size: 15px;"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="text" name="RuEmail" lay-verify="title" autocomplete="off" placeholder="email" class="layui-input r_email">
                                            <span id="validREmail" class="" aria-hidden="true"></span>
                                          </div>
                                          <span class="error"></span>
                                      </div> 
                                      <!--手机号-->
                                      <div class="layui-form-item">
                                          <label class="layui-form-label"><span class="glyphicon glyphicon-phone" aria-hidden="true" style="font-size: 15px;"></span></label>
                                          <div class="layui-input-block input">
                                            <input type="text" name="RuPhone" lay-verify="title" autocomplete="off" placeholder="phone" class="layui-input r_phone">
                                            <span id="validRPhone" class="" aria-hidden="true"></span>
                                          </div>
                                          <span class="error"></span>
                                      </div> 
                                      <div class="layui-form-item">
                                          <div class="layui-input-block input">
                                            <input type="text" name="RuCode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input" style="width: 58%;float: left;margin-right: 4%;">
                                            <button type="button" id="phone_code" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off" style="width: 33%;font-size: 12px;margin-top: 3px;">
                                              点击获取验证码
                                            </button>
                                          </div>
                                         
                                          <span class="error"></span>
                                      </div> 
                                      <div style="margin-top:35px;">
                                          <input type="button" id="submit_register" class="layui-btn layui-btn-primary" value="注册"></input>
                                          <input id="resetR" type="reset" class="layui-btn layui-btn-primary"></input>
                                      </div>                     
                                  </form>
                                  
                                  <div style="display:block;width:100%;height:50px;height: 25px;"><span id="login"><a href="#">sign-in</a></span></div>     
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
<script src="static/common/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function(){
      /*表单序列化*/
      $.fn.serializeObject = function()
        {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
      /*切换注册登录页面*/
      $('#register').on('click',function(){
          $('#login_wrap').fadeOut(2000);
          $('#register_wrap').fadeIn(2000);
          $('#login_wrap').css('display','none');
      });
      $('#login').on('click',function(){
          $('#register_wrap').fadeOut(1000);
          $('#login_wrap').fadeIn(1000);
          $('#register_wrap').css('display','none');
      });
      /*登录提交*/
      $('#submit_login').on('click',function(){
         if($("input[name='uName']").val()==''){
            $("input[name='uName']").parent().next().text("用户名不能为空");
         }else if($("input[name='uPwd']").val()==''){
            $("input[name='uPwd']").parent().next().text("密码不能为空");
         }else{
            var jsonObj = $("#login_form").serializeObject();

            var jsonStr = JSON.stringify($("#login_form").serializeObject());
            var url = '/user_module/user';
            fetch(url, {
              method: 'POST',
              body: jsonStr,
              headers: new Headers({
                'Content-Type': 'application/json;charset=utf-8'
              })
            }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
              if(response.status=='401'){
                  //正上方信息验证
                  tips(response.status,response.msg);
              }else if(response.status=='200'){
                console.log(response);
                  window.location.href="index.html";
              }
            });
         }
      });
      /*提示信息函数封装*/
      function tips(status,tips_msg){
          $('.tips_msg').text(tips_msg);
          $('.tips').css('display','block'); 
          if(status=='401'){
            $('.tips').attr('class','tips danger');
            $('object').attr('data','static/system/svg/error.svg');
          }else if(status=='200'){
            $('.tips').attr('class','tips success');
            $('object').attr('data','static/system/svg/success.svg');
          }else if(status=='501'){
            $('.tips').attr('class','tips warning');
            $('object').attr('data','static/system/svg/warning.svg');
          }
          $('.tips').fadeOut(3000); 
      }

      /*注册信息校验*/
      window.onload =valid;
      var  usernameRegExp= /^[a-zA-Z\u4E00-\u9FA5]{6,15}$/;
      var  passwordRegExp= /^[A-Z][a-zA-Z0-9_]{4,14}$/;
      var  emailRegExp=/^[a-zA-Z0-9_]{1,}@[0-9a-z]{1,}\.(com|net|cn)$/;
      var  phoneRegExp=/^1[34578]\d{9}$/;
      function valid(){
          commonValid('.r_username','validRUsername','用户名必须是中文或字母不能是数字,6-15位',usernameRegExp);
          commonValid('.r_password','validRPassword','密码必须是英文大写开头,5-15位',passwordRegExp);
          commonValid('.r_email','validREmail','邮箱格式不正确,eq:xxx@xx.com|cn|net',emailRegExp);
          commonValid('.r_phone','validRPhone','手机格式不正确,请输入11位手机号',phoneRegExp);
      }
      function commonValid(inputClass,iconClass,message,regExp){/*输入框的类，出错后的图标显示类,出错后的消息提示,正则表达式*/
        $(inputClass).blur(function(){
            if($(inputClass).val()!=''){
              if(!regExp.test($(inputClass).val())){
                $('#'+iconClass).attr('class','glyphicon glyphicon-remove');
                $('#'+iconClass).parent().next().text(message);
              }else{
                $('#'+iconClass).attr('class','glyphicon glyphicon-ok');
                $('#'+iconClass).parent().next().text('');
              }
            }
          });
      }
      /*弹出框*/
      function layuiLayer(title,content){
        layui.use('layer', function(){
              var layer = layui.layer;
              layer.open({
                title:title,
                area: 'auto',
                maxWidth:360,
                type: 1, 
                content: "<span style='text-align:center;display: block;'>"+content+"</span>" //这里content是一个普通的String
              });
        });           
      }
      /*注册提交校验*/
      $('#submit_register').on('click',function(){
          if(!usernameRegExp.test($('.r_username').val())||$('.r_username').val()==''){
            layuiLayer('用户名','用户名必须是中文或字母不能是数字,6-15位,且不能为空');     
            return false;
          }else if(!passwordRegExp.test($('.r_password').val())||$('.r_password').val()==''){
            layuiLayer('密码','密码必须是英文大写开头,5-15位,且不能为空');             
            return false;
          }else if(!emailRegExp.test($('.r_email').val())||$('.r_email').val()==''){   
            layuiLayer('邮箱','邮箱格式不正确,eq:xxx@xx.com|cn|net,且不能为空');                  
            return false;
          }else if(!phoneRegExp.test($('.r_phone').val())||$('.r_phone').val()==''){   
            layuiLayer('手机','手机格式不正确,请输入11位正确手机号,eq：1[34578]*');                  
            return false;
          }else{
            var data = {
              uName:$("input[name='RuName']").val(),
              uPwd:$("input[name='RuPwd']").val(),
              uPhone:$("input[name='RuPhone']").val(),
              uEmail:$("input[name='RuEmail']").val(),
              uCode:$("input[name='RuCode']").val()
            };
            var url = '/user_module/regist';
            fetch(url, {
              method: 'POST',
              body: JSON.stringify(data),
              headers: new Headers({
                'Content-Type': 'application/json;charset=utf-8'
              })
            }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
              if(response.status=='401'){
                  //正上方信息验证
                  tips(response.status,response.msg);
              }else if(response.status=='200'){
                  window.location.href="sign-inOrOut.html";
              }
            });
          }
          
      }); 
      $('#resetR').on('click',function(){
          $('#validRUsername,#validRPassword,#validREmail').attr('class','');
          $('#validRUsername,#validRPassword,#validREmail').parent().next().text('');
      });
      /*注册*/
      /*异步请求确保用户存在状态*/
      $('.r_username').blur(function(){
          if($('.r_username').val()!=''&&$('.r_username').val().length>=6){
            var url = '/user_module/isUserExist';
            var data = {uName: $("input[name='RuName']").val()};
            fetch(url, {
              method: 'POST',
              body:JSON.stringify(data),
              headers: new Headers({
                'Content-Type': 'application/json;charset=utf-8'
              })
            }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
              if(response.status=='401'){
                  //正上方信息验证
                  tips(response.status,response.msg);
              }else if(response.status=='200'){
                  tips(response.status,response.msg);
              }
            });
          }
        });
        /*获取手机验证码*/
        $('#phone_code').on('click',function(){
            var url = '/user_module/getValidate';
            $('#phone_code').attr('disabled',true);
            $('#phone_code').html('正在发送验证码');
            var data = {uPhone: $("input[name='RuPhone']").val()};
            fetch(url, {
              method: 'POST',
              body:JSON.stringify(data),
              headers: new Headers({
                'Content-Type': 'application/json;charset=utf-8'
              })
            }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
              if(response.status=='401'){
                  //正上方信息验证
                  tips(response.status,response.msg);
              }else if(response.status=='200'){
                  tips(response.status,response.msg);
              }else if(response.status=='501'){
                  tips(response.status,response.msg);
              }
              $('#phone_code').attr('disabled',false);
              $('#phone_code').html('点击获取验证码');
            });
        });
    });
</script>
</body>
</html>
